<template>
  <div class="app-container">
    <div style="padding: 20px">
      <el-form :inline="true" class="search-form">
        <el-row style="display: flex; flex-wrap: wrap">
          <el-col :span="20">
            <el-form-item label="活动名称：">
              <el-input
                v-model="searchForm.params.activity_name"
                placeholder="请输入名称"
                :maxlength="20"
                show-word-limit
              />
            </el-form-item>
            <el-form-item label="状态：">
              <el-select
                v-model="searchForm.params.status"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    { name: '结束', id: '-1' },
                    { name: '已开始', id: '1' },
                    { name: '已关闭', id: '2' },
                    { name: '进行中', id: '3' },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="marginTop">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col>
            <el-button
              icon="el-icon-circle-plus-outline"
              type="primary"
              size="small"
              @click="addDetail('新建活动')"
              >添加活动</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            :data="dataList"
            style="width: 100%"
          >
            <el-table-column align="center" prop="id" label="ID" />
            <el-table-column
              align="center"
              prop="activity_name"
              label="活动名称"
            />
            <el-table-column
              align="center"
              prop="start_time"
              label="开始时间"
            />
            <el-table-column align="center" prop="end_time" label="结束时间" />
            <el-table-column align="center" prop="status" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == -1" style="color: #ff4949"
                  >活动结束</span
                >
                <span v-if="scope.row.status == 1" style="color: #13ce66"
                  >已开启</span
                >
                <span v-if="scope.row.status == 2" style="color: #81b337"
                  >已关闭</span
                >
                <span v-if="scope.row.status == 3" style="color: #13ce66"
                  >进行中</span
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="200"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  style="margin: 5px"
                  v-if="scope.row.status == 1 || scope.row.status == 3"
                  type="warning"
                  size="mini"
                  @click="saveStatus(scope.row)"
                >
                  关闭活动
                </el-button>
                <el-button
                  disabled
                  style="margin: 5px"
                  v-if="scope.row.status == -1"
                  type="danger"
                  size="mini"
                >
                  活动结束
                </el-button>
                <el-button
                  style="margin: 5px"
                  v-if="scope.row.status == 2"
                  type="success"
                  size="mini"
                  @click="saveStatus(scope.row)"
                >
                  开启活动
                </el-button>

                <el-button
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="emitWay(scope.row)"
                  :disabled="scope.row.status == 3"
                >
                  修改
                </el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="delWay(scope.row)"
                >
                  <el-button
                    slot="reference"
                    style="margin: 5px"
                    :disabled="scope.row.status == 1 || scope.row.status == 3"
                    type="danger"
                    size="mini"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.page.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>

    <!-- 添加或者编辑活动 -->
    <adddetails
      v-if="dialogVisible"
      ref="detail"
      :detailTitle="detailTitle"
      :regionList="regionList"
      :gradeList="gradeList"
      :groupingList="groupingList"
      :TagCategoryAll="TagCategoryAll"
    ></adddetails>
  </div>
</template>

<script>
import LogoUpload from "@/components/FileUpload";
import { getBonusList,delBonus,editStatusRestitution } from "@/api/activity/agriculturev2";

import {
  getgroupList,
  getTagCategoryAll,
  getgradeList,
  getRegionList,
} from "@/api/user/index";
import adddetails from "./components/details.vue";

export default {
  name: "SendPoint",
  components: { adddetails, LogoUpload },
  data() {
    return {
      detailTitle: "",
      loading: false,
      searchForm: {
        params: {
          activity_name: "",
          status: "",
        },
        count: 10,
        page: 1,
      },
      dataList: [], // 列表数组
      total: 0, // 列表总条数
      dialogVisible: false, // 添加修改弹框控制器
      classList: [],
      GoodsDataList: [],
    };
  },
  created() {
    const p1 = new Promise((resolve, reject) => {
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.groupingList = res.data.list;
        resolve();
      });
    });

    const p2 = new Promise((resolve, reject) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.TagCategoryAll = res.data;
        resolve();
      });
    });

    const p3 = new Promise((resolve, reject) => {
      getgradeList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.gradeList = res.data.list;
        resolve();
      });
    });

    const p4 = new Promise((resolve, reject) => {
      getRegionList({ level: 2 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.regionList = res.data;
        resolve();
      });
    });
    Promise.all([p1, p2, p3, p4])
      .then(() => {
        this.getListWay();
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    // 获取列表的函数
    getListWay() {
      this.loading = true;
      getBonusList(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.dataList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    //打开抽屉
    addDetail(title) {
      this.detailTitle = title;
      this.dialogVisible = true;
    },
    //关闭抽屉
    closedetail() {
      this.dialogVisible = false;
      this.getListWay();
    },
    // 重置搜索列表的函数
    resetting() {
      this.searchForm = {
        params: {
          activity_name: "",
          status: "",
        },
        count: 10,
        page: 1,
      };
      this.getListWay();
    },
    // 点击删除的函数
    delWay(row) {
      this.loading = true;
      delBonus({ id: row.id })
        .then(() => {
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    // 点击修改的函数
    emitWay(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.detail.getAwardInfoWay(row);
      });
    },
    // 单独修改列表某条数据状态的函数
    saveStatus(row) {
      var obj = {
        id: row.id,
        status: "",
      };
      console.log(row);
      if (row.status === 1) {
        obj.status = 2;
      } else if (row.status === 2) {
        obj.status = 1;
      } else if (row.status === 3) {
        obj.status = 2;
      }

      this.loading = true;
      editStatusRestitution(obj)
        .then((res) => {
          this.$messages.success(res.msg);
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },

    // 列表分页的函数
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
    // 列表分页的函数
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
  },
};
</script>

<style lang="scss" scoped>
.splitTitle {
  font-size: 16px;
  font-weight: 700;
  color: #606266;

  .split {
    width: 95%;
    border-bottom: 2px solid #c9c9c980;
    padding-bottom: 10px;
    margin: 20px auto;
  }
}
</style>
<style>
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9993 !important;
}

.tox-tinymce-aux {
  z-index: 9990 !important;
}

.tox .tox-dialog {
  z-index: 9995 !important;
}
</style>
